/**
 * All rights Reserved, Designed By 信鸥科技
 * project : Innovation-design
 * Created by youquer on 17/11/10.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  TreeSelect, Form, Input, DatePicker, Select, Button, notification, Card, InputNumber, Radio, Icon, Tooltip, Upload, Modal
} from 'antd';
const Option = Select.Option;
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './TabAdd.less';

const FormItem = Form.Item;
import queryString from 'query-string';


//import EditorConvertToHTML from '../../components/Editor/Editor';

@connect(state => ({
  tab: state.tab,
}))
@Form.create()

export default class TabAdd extends PureComponent {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: "tab/clear"
    });
    var search = queryString.parse(this.props.location.search);
    if (search.id) { //修改
      dispatch({
        type: 'tab/save',
        payload: {id: search.id}
      });
      dispatch({
        type: 'tab/get',
        payload: {id: search.id}
      });
    }
  }

  onInputChange(e){
    var key = e.target.name;
    var value = e.target.value;
    const { dispatch } = this.props;
    var t = {};
    t[key] = value;
    dispatch({
      type: 'tab/save',
      payload: t
    })
  }

  onInputNumChange(key, value){
    var t = {};
    t[key] = value;
    this.props.dispatch({
      type: 'tab/save',
      payload: t
    })
  }

  onSelectChange(key, e){
    const { dispatch } = this.props;
    var t = {};
    t[key] = e;
    dispatch({
      type: 'tab/save',
      payload: t
    })
  }

  btnAct(){
    const {dispatch, tab} = this.props;
    const { id } = tab;
    if (id){
      dispatch({
        type: 'tab/update',
      })
    } else {
      dispatch({
        type: 'tab/add',
      })
    }
  };

  //图片
  handleCancel() {
    const {dispatch} = this.props;
    dispatch({
      type: 'tab/save',
      payload: {previewVisible: false}
    })
  }

  handlePreview(file) {
    const {dispatch} = this.props;
    dispatch({
      type: 'tab/save',
      payload: {
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      }
    });
  }

  handleChange = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'tab/save',
      payload: {content: value}
    })
  };



  render() {
    const { submitting, tab } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { id, name, type, classify} = tab;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

    const submitFormLayout = {
      wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 10, offset: 7 },
      },
    };



    var formItemArray = [];
    /** 类型: type 1-input, 2-select, 3-inputNumber **/
    var addArray = [
      {
        name: 'name',
        value: name,
        title: '名称',
        type: 1,
        message: '请输入名称, 最多输入10个字',
      },
      {
        name: 'classify',
        value: classify,
        title: '类型',
        type: 2,
        message: '请选择标签类型',
      },
    ];

    for (var i = 0; i < addArray.length; i++){
      var item = addArray[i];
      switch (item.type){
        case 1:
          formItemArray.push(
            <FormItem
              key={"tab-item-" + i}
              {...formItemLayout}
              label={item.title}
            >
              {getFieldDecorator(item.name, {
                rules: [{
                  required: true, message: item.message,
                }],
                initialValue: item.value
              })(
                <Input maxLength="10" name={item.name}
                       onChange={this.onInputChange.bind(this)} placeholder={item.message} />
              )}
            </FormItem>
          );
          break;
        case 2:
          var optionArray = [];
          // for (var j = 0; j < tabClassify.length; j++){
          //   optionArray.push(
          //     <Option key={"option-key-" + j} value={tabClassify[j].value + ''}>{tabClassify[j].text}</Option>
          //   );
          // }
          formItemArray.push(
            <FormItem
              key={"tab-item-" + i}
              {...formItemLayout}
              label={item.title}
              required={true}
            >
              <Select value={item.value + ''} onChange={this.onSelectChange.bind(this, "classify")} >
                <Option value="0">请选择标签类型</Option>
                {/*{ optionArray }*/}
              </Select>
            </FormItem>
          );
          break;
        //case 3:
        //  formItemArray.push(
        //    <FormItem
        //      key={"tab-item-" + i}
        //      {...formItemLayout}
        //      label={item.title}
        //    >
        //      {getFieldDecorator(item.name, {
        //        rules: [{
        //          required: false, message: item.message,
        //        }],
        //        initialValue: item.value
        //      })(
        //        <InputNumber className={styles.full_width} min={0} name="sort" placeholder={item.message}
        //                     onChange={this.onInputNumChange.bind(this, "sort")} />
        //      )}
        //    </FormItem>
        //  );
        //  break;
        default:
          break;
      }
    }

    return (
      <PageHeaderLayout title={id? "修改标签" : "添加标签" } content="">
        <Card bordered={false}>
          <Form
            style={{ marginTop: 8 }}
          >
            {formItemArray}
            <FormItem {...submitFormLayout} style={{ marginTop: 32 }}>
              <Button type="primary" onClick={this.btnAct.bind(this)} loading={submitting}>
                提交
              </Button>
            </FormItem>
          </Form>
        </Card>
      </PageHeaderLayout>
    );
  }
}
